<template>
  <view class="upload-container">
    <button @click="selectFiles">上传图片</button>
    <input 
      type="file" 
      ref="fileInput" 
      @change="onFilesChange" 
      multiple 
      style="display: none;" 
    />
  </view>
</template>

<script>
export default {
  methods: {
    selectFiles() {
      // 确保 fileInput 是有效的 DOM 元素
      const fileInput = this.$refs.fileInput;
      if (fileInput) {
        fileInput.click();
      } else {
        console.error('File input not found');
      }
    },
    onFilesChange(event) {
      const files = Array.from(event.target.files);
      if (files.length > 0) {
        this.$emit('files-upload', files);
        // Reset the file input to allow selecting the same file again
        this.$refs.fileInput.value = '';
      }
    }
  }
}
</script>

<style scoped>
.upload-container {
  text-align: center;
}
.upload-container button {
  background-color: #70cf82;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>
